<template>
  <div class="forgetPassword-wrapper">
    <div class="forget-content">
      <!-- 头部按钮区域 -->
      <div class="header-button">
        <!-- 下面逻辑,步骤1,显示忘记密码;步骤2,显示重置密码;步骤三,什么都不显示 -->
        <span v-text="current==0?'忘记密码':current==1?'重置密码':''"></span>
        <!-- 步骤一,显示返回登录,其余步骤什么都不显示 -->
        <span v-show="current==0" @click="$router.push('/login')">返回登录</span>
      </div>
      <!-- 中部步骤条区域 -->
      <div class="middle-steps">
        <a-steps :current="current" labelPlacement="vertical" size='small'>
          <a-step v-for="item in stepTitles" :key="item" :title="item" />
        </a-steps>
      </div>
      <!-- 底部表单区域 -->
      <div class="bottom-form">
        <!-- 步骤一表单 -->
        <div v-show="current == 0">
          <a-form-model
            ref="forgetPasswordFormRef_1"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :rules="firstRules"
            :model="forgetPasswordForm_1"
            style="margin-left:240px;margin-top:30px;position:relative;"
          >
            <a-form-model-item label="" prop="mobilePhone">
              <a-input
                size="large"
                placeholder="请输入手机号码"
                v-model="forgetPasswordForm_1.mobilePhone"
              ><a-icon slot="prefix" type="mobile" /></a-input>
            </a-form-model-item>
            <a-form-model-item
              class="phoneYZM"
              prop="verifyCode"
              style="position:relative"
            >
              <a-input
                  placeholder="请输入手机验证码"
                  size="large"
                  v-model="forgetPasswordForm_1.verifyCode"
              ><a-icon slot="prefix" type="info-circle" /></a-input>
              <a-button :disabled="disabled" @click="sendCode" class="sendYZMbtn">{{text}}</a-button>
            </a-form-model-item>
            <a-form-model-item class="forgetPasswordBtn">
              <a-button type="primary" block @click="onNext" class="forgetPasswordBtn"> 下一步 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!-- 步骤二表单 -->
        <div v-show="current == 1">
          <a-form-model
            ref="forgetPasswordFormRef_2"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            :rules="secondRules"
            :model="forgetPasswordForm_2"
            style="margin-left:240px;margin-top:30px"
          >
            <a-form-model-item label="" prop="password">
              <a-input
                size="large"
                placeholder="请设置6-20位登录密码"
                v-model="forgetPasswordForm_2.password"
              ><a-icon slot="prefix" type="key" /></a-input>
            </a-form-model-item>
            <a-form-model-item label="" prop="passwordSecond">
              <a-input
                size="large"
                placeholder="请再次输入新的登录密码"
                v-model="forgetPasswordForm_2.passwordSecond"
              ><a-icon slot="prefix" type="key" /></a-input>
            </a-form-model-item>
            <a-form-model-item class="forgetPasswordBtn">
              <a-button type="primary" block @click="onSubmit" > 确定 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!-- 步骤三部分 -->
        <div v-show="current == 2">
          <div class="stepsThirdContent">
            <a-icon type="check-circle" class="successIcon" style="color:#F76346"/>
            <div style="font-weight:bold">设置成功</div>
            <a-button   @click="$router.push('/login')"> 去登录 </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
  forgetPasswordGetYZM,
  forgetPasswordGetYZMvalid,
  forgetPasswordUpdatePassword
} from "@/services/user";

export default {
  name: "ForgetPassword",
  data() {
    //自定义校验规则,验证确认密码和设置密码是否相同
    let checkPasswordValid = (rule, value, callback) => {
      if (value !== this.forgetPasswordForm_2.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    // 2.自定义校验规则,验证手机号合法
    let checkMobilePhone = (rule, value, callback) => {
      var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (reg.test(value)) {
        // 如果合法,然后发送请求校验唯一
        callback()
      } else {
        // 如果不合法,提示输入正确的手机号
        callback(new Error("请输入正确的手机号"));
      }
    };
    return {
      // 步骤条状态码
      current:0,
      // 步骤条titles
      stepTitles:["安全校验","设置新密码","设置成功"],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // 表单一校验规则
      firstRules: {
        mobilePhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkMobilePhone, trigger: "blur" },
        ],
        verifyCode: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      // 忘记密码页第一页表单数据
      forgetPasswordForm_1: {
        mobilePhone: "",
        verifyCode: "",
      },
      // 忘记密码页第二页表单数据
      forgetPasswordForm_2:{
        password:"",
        passwordSecond:""

      },
      // 忘记密码页第二页表单验证规则
      secondRules:{
          password: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            { min: 6, max: 20, message: "密码长度为6-20位", trigger: "blur" },
          ],
          passwordSecond: [
            { required: true, message: "请再次输入密码", trigger: "blur" },
            { validator: checkPasswordValid, trigger: "blur" },
          ],
      },
      disabled: false,
      text: "获取验证码",
    };
  },
  created() {
  },
  computed: {
  },
  methods: {
    // 点击按钮发送手机验证码
    // 携带手机号码,手机号码加密
    sendCode() {
        console.log(11111);
        var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
        if (reg.test(this.forgetPasswordForm_1.mobilePhone)) {
          // 手机号合法,准备发送获取验证码
          forgetPasswordGetYZM({phoneNumber:this.forgetPasswordForm_1.mobilePhone})
            .then((res) => {
              if (res.data.status == 0) {
                this.$message.success("验证码发送成功");
              } else {
                this.$message.error("验证码发送失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
          let n = 60;
          this.disabled = true;
          const int = setInterval(() => {
            this.text = n + "秒后重新发送";
            n--;
            if (n === 0) {
              this.disabled = false;
              this.text = "获取验证码";
              clearInterval(int);
            }
          }, 1000);
        }
    },
    // 步骤一点击下一步,
    // 验证通过,并且手机验证码通过,才能进行下一步
    onNext(){
      this.$refs.forgetPasswordFormRef_1.validate(valid => {
        if(valid){
          // 本地校验通过,发送请求,校验手机号码和验证码是否一致
          forgetPasswordGetYZMvalid(this.forgetPasswordForm_1).then(res => {
            console.log(res.data.status);
            // 手机号码和验证码校验通过
            if(res.data.status === 0) this.current = 1
            else return false
          })
        } else {
          return false
        }
      })
    },
    // 点击确定发送修改密码请求
    // 携带手机号码,手机号码加密
    onSubmit(){
      // 首先本地校验通过
      this.$refs.forgetPasswordFormRef_2.validate(valid => {
        if(valid){
          // 发送设置密码请求
          const data = {
            phoneNumber:this.forgetPasswordForm_1.mobilePhone,
            password:this.forgetPasswordForm_2.password
          }
          forgetPasswordUpdatePassword(data).then(res => {
            if(res.data.status == 0) {
              this.$message.success("密码修改成功");
              this.current = 2
            }
            else {
              this.$message.error("密码修改失败");
              return false
            }
          }).catch(err => {
            console.log(err.data);
          })
        } else {
          return false
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
  .forgetPassword-wrapper {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/img/login/bgcbanner.png");
    background-repeat: no-repeat;
    background-position-x: 0;
    background-position-y: 0;
    background-size: 100% 100%;
    position: relative;
    .forget-content{
      width: 800px;
      height: 500px;
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      .header-button{
        height: 100px;
        line-height: 100px;
        width:100%;
        /* background-color:#bfa; */
        padding:0 40px;
        display:flex;
        justify-content: space-between;
        & span:nth-child(1){
          font-size: 18px;
          font-weight: bold;
        }
        & span:nth-child(2){
          color: #409EFF;
          cursor: pointer;
        }
      }
      .middle-steps{
        width: 70%;
        height: 70px;
        // background-color: aqua;
        margin: 0 auto;
      }
      .forgetPasswordBtn {
        width: 100%;
        margin-top: 20px;
        button {
          height: 49px;
          line-height: 49px;
          font-size: 22px;
        }
      }
      .stepsThirdContent {
        // margin-left: 450px;
        margin: 70px auto 0;
        text-align: center;
        // background-color: #bfa;
        .successIcon {
          font-size: 60px;
          color: #19be6b;
        }
        div {
          margin-top: 20px;
          margin-bottom: 50px;
          color: #666666;
          font-size: 20px;
        }
        button{
          // width: 30%;
          width: 327px;
          height: 49px;
          color: #fff;
          background-color: #F76346;
          outline: none;
          border: none;
          font-size: 24px;
          &:hover{
            background-color: #409EFF;
          }
          
        }
      }
      .bottom-form{
        .sendYZMbtn{
          color: #6BB8FF;
          outline: none;
          border: none;
          // background-color: #fff;
          box-shadow: none;
          font-size: 12px;
          position: absolute;
          right: 10px;
          top: -7px;
          margin: 0;
          padding: 0;
        }
        .forgetPasswordBtn{
          button{
            background-color: #00afaf;
            outline: none;
            border: none;
            &:hover{
              background-color: #1de6e6;
            }
          }
        }
      }
    }
  }


</style>